<template>
    <div class="whiteBg exit">
        <van-nav-bar class="navBar" title="手动出场" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
        <div class="mainWrap fixedMain">
            <van-list
                :finished="finished"
                :immediate-check="false"
                v-model="loading"
                finished-text="没有更多了"
                @load="onLoad"
                :offset="10"
                >
                <van-search
                    v-model="searchVal"
                    placeholder="搜索车牌"
                    @search="onSearch"
                    show-action
                    background="#dcdfe6"
                    >
                    <van-button class="searchBtn" slot="action" type="info" size="small" @click="onSearch">搜索</van-button>
                </van-search>
                <van-card
                    class="vanCard"
                    v-for="(item,index) in presentCarList"  :key="index"
                    :thumb="item.imgUrl?item.imgUrl:'../../assets/images/defaultImg.png'"
                    @click-thumb="imgPreview(item.imgUrl)"
                    >
                    <template #title>
                        <p v-if="item.carType==1">月租车</p> 
                        <p v-if="item.carType==2">储值车</p> 
                        <p v-if="item.carType==3">免费车</p> 
                        <p v-if="item.carType==4">临时车</p> 
                        <p v-if="item.carType==5">时段限制月租</p> 
                    </template>
                    <template #desc>
                        <p >车牌：{{item.carNum}}</p>
                        
                        <p >入场：{{item.inTime}}</p>
                    </template>
                    <template #footer>
                        <van-button type="info" size="small" @click="selectCar(item)">选择</van-button>
                    </template>
                </van-card>
                <div class="noSearch" v-if="presentCarList.length === 0">暂无查询数据</div>
            </van-list>
        </div>
        <!-- 手动出场弹窗 -->
        <el-dialog class="dialog" title="手动出场" :visible.sync="exitdialog" width="90%">
            <div class="content">
                <div class="tips">
                    请确认是否修改下发车牌
                </div>
                <el-form ref="form" :model="form"  size="mini" class="elForm">
                    <div class="carNum">
                        <plateNumber v-if="exitdialog" :carNum="form.carNum" @getPlateLicense="getPlateLicense" :noLabel="true"></plateNumber>
                    </div>
                    <el-form-item label="出场时间：" label-width="83px">
                        <el-date-picker
                            class="fullWidth"
                            v-model="form.outTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择出场时间">
                        </el-date-picker> 
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" center>
                <el-button type="primary" @click="changeAsyncOK('form')" size="mini">确 定</el-button>
                <el-button  @click="cancel" size="mini">取消</el-button>
            </span>
        </el-dialog>
        <!-- 出场结果弹窗 -->
        <el-dialog class="dialog" title="手动出场缴费" :visible.sync="exitResultdialog" width="90%">
            <div class="content">
                <div class="qrCode">
                    <img :src="qrCodeSrc" alt="" srcset="">
                </div>
                <el-row  style="text-align:center">
                    <el-col :span="12" >
                        <div class="grid-content bg-purple">
                            <p>停车时长</p>
                            <p><el-link type="primary">{{stopTime}}</el-link></p>
                        </div>
                    </el-col>
                    <el-col :span="12" >
                        <div class="grid-content bg-purple">
                            <p>需要缴费</p>
                            <p><el-link type="primary">{{payMoney}}元</el-link></p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exitResultdialog=false" size="mini">取消</el-button>
            </span>
        </el-dialog>
    </div>  
</template>
        
<script>
import { mapGetters } from "vuex"
import { ImagePreview } from 'vant';
import plateNumber from '@/components/plateNumber'
import { timeFormate } from '@/utils'
export default {
    components: {
        [ImagePreview.Component.name]: ImagePreview.Component,
        plateNumber
    },
    data(){
        return {
            finished: false,
            loading: false,
            presentCarList:[],
            searchVal:'',
            params:{
                carNum:'',
                depId:'',
                pageNo:1,
                pageSize:10 
            },
            pageNo: 1,//请求第几页
            pageSize: 10,//每页请求的数量
            total: 0,//总共的数据条数
            exitdialog:false,
            form:{
                laneId:'',
                carNum:'',
                outTime:'',
                recordId:''
            },
            exitResultdialog:false,
            qrCodeSrc:'',
            stopTime:0,
            payMoney:0
        }
    },
    computed: {
        ...mapGetters(["orgCategory",'carParkInfo'])
    },
    created() {
        this.params.depId = this.carParkInfo.depId||sessionStorage.getItem('depId')
        /* this.form.depId = this.carParkInfo.depId||sessionStorage.getItem('depId')
        this.form.parkId = this.carParkInfo.id||JSON.parse(sessionStorage.getItem('carParkInfo')).id */
        this.form.outTime = timeFormate(new Date())
        this.initData();
    },
    methods: {
        onClickLeft(){
            this.$router.push('/deviceManage')
        },
        getPlateLicense(data){
            this.form.carNum = data
        },
        imgPreview(url){
            ImagePreview({
                images: [url],
                showIndex:false,
                closeable: true,
            });
        },
        //查询
        onSearch(){
            this.params.carNum = this.searchVal
            this.presentCarList = []
            this.pageNo = 1
            this.loading = true
            this.finished = false;
            this.initData();
        },
        // 下拉加载
        onLoad () {
            if (!this.loading) {
                return false
            }            
            this.initData();
        },
        //数据初始化
        initData(){
            console.log(this.params,'params')
            this.params.pageNo = this.pageNo
            this.params.pageSize = this.pageSize
            this.$api.home.getPresentCarList(this.params).then(res=>{
                if(res.code == 200){
                    this.loading = false;
                    this.total = res.result.total
                    let rows = res.result.records; //请求返回当页的列表
                    if (rows == null || rows.length === 0) {
                        // 加载结束
                        this.finished = true;
                        return;
                    }
                    this.presentCarList = this.presentCarList.concat(rows)
                    //如果列表数据条数>=总条数，不再触发滚动加载
                    if (this.presentCarList.length >= this.total) {
                        this.finished = true;
                    }                    
                    this.pageNo++;
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        selectCar(item){
            this.form.recordId = item.id
            this.form.laneId = this.$route.query.deviceLaneId
            this.form.carNum = item.carNum
            this.$store.dispatch('setCarNum', item.carNum) 
            this.exitdialog = true
        },
        changeAsyncOK(){
            let formData = new FormData()
                formData.append('recordId',this.form.recordId)
                formData.append('laneId',this.form.laneId)
                formData.append('carNum',this.form.carNum)
                /* formData.append('outTime',this.form.outTime) */
            this.$api.home.artificialOut(formData).then(res=>{
                if(res.code == 200){
                    this.qrCodeSrc = 'data:image/png;base64,'+res.result.img
                    this.stopTime = res.result.rstayTime
                    this.payMoney = res.result.orderMoney                    
                    this.exitdialog = false
                    this.exitResultdialog = true
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        cancel(){
            this.exitdialog = false
        }
    },
}
</script>

<style lang="less" scoped>
    .searchBtn{
        margin-right:15px
    }
    .mainWrap{
        .title{
            padding: .3rem 0;
            text-align: center;
        }
        .van-row{
            margin: 0 .3rem;
        }
        .cardHeaderWrap 
        {            
            background-color: #eee;
            &.van-row{                
                margin-top:.2rem;
            }
            .van-col {
                padding: .2rem 0;
                text-align: center;
            }
        }
        
        .cardWrap{
            flex-wrap:wrap;
            margin-top:.2rem;
            padding: .1rem 0;
            border: 1px solid #666;
            text-align: center;
            .van-col {
                padding: .1rem 0;
                text-align: center;
            }
            .divider{
                display: inline-block;
                width: 90%;
                margin: 5px auto;
                border-color: #666;
            }
            .van-button{
                height:.6rem;
            }
            .green{
                color:#1fa10e
            }
            .red{
                color:#ff001f
            }
        }
        .van-card{
            p{
                font-size: .3rem;
            }
        }
    }
    .radioItem{
        margin-bottom: 10px;
    }
    .presentcarDialog.covers .dialog{
        width: 7.3rem;
        margin-bottom: 5rem;
    }
    .exit{
        .elForm{
            padding: .3rem .2rem;
            background-color: #fff;
            .footer{
                text-align: center;
            }
        }
        .carNum{
            width: 100%;
            margin-bottom: 10px;
            /deep/ .wrap{
                padding: 0;
                border-bottom:0;
                .singleBlock{
                    display: inline-block;
                    width: 100%;
                }
                .card-header{
                    float: left;
                    display: inline-block;
                    width: 83px;
                    padding-right:0;
                    margin:0;
                }
            }
        }
        /deep/ .dialog{
            .el-dialog__header{
                background-color: #409EFF;
                text-align: center;
            }
            .el-dialog__title{
                color:#fff;
            }
            .el-dialog__headerbtn{
                .el-dialog__close {
                    color: #fff;
                }
            }
            .content{
                text-align: center;
                .el-form-item__label{
                    padding-right:0;
                }
                .tips{
                    width: 100%;
                    color: #FF0000;
                    text-align: center;
                }
                .qrCode{
                    margin-bottom:.2rem;
                    img{
                        max-width: 90%;
                    }
                }
            }
            .dialog-footer{
                display: inline-block;
                width: 100%;
                text-align: center;
            }
        }
    }
    
</style>